/**
 * 楼栋介绍
 * 
 * this.props.buildingData (object)  数据对应于 project-intro.json 中的 buildingDes[0]
 * this.props.floorsData (array)    // 拥有楼层数组信息
 * 
 */


import { Link } from 'react-router-dom'
import React, { Component } from 'react';
import ajax from '../utils/ajax.js';
import ProjectFloor from './projectFloor.js'
import EventManager from '../utils/event.js'
// ------------应该通过点击事件，然后选择某文件，进行get操作来获得数据



// ----------------


import ldjs from '../../img/project/ldjs.png';
import gl1 from '../../img/project1/1.png';
import gl2 from '../../img/project1/2.png';
import gl3 from '../../img/project1/3.png';
import dl from '../../img/project1/0.png';
import jxlcDl from '../../img/project1/jxlc.png';
import jwjr from '../../img/project1/jwjr.png';
// 长城汇的描点信息
// import mdJson from '../../projectBuildingData/cch-md.json';

// var mdJson = {};
class ProjectBuilding extends Component {

    constructor(props) {
        super(props)

        // this.props.buildingIntroData // 当前楼栋的介绍
        // this.props.curBuildingData 当前楼层的详细信息

        console.log("当前楼栋的详细信息:")
        console.log(this.props.curBuildingData);

        this.state = { curFloorData: null, floorMdJson: null, mdJson: null, floorName: null };
        // floorMdJson 当前楼层的描点数据
        // mdJson 当前楼栋的描点数据
        // curFloorData 当前楼栋的介绍数据
        // floorName 当前选择的楼层号 (比如: 20/20/B1)
        this.onCloseSelectFloorsPanel = this.onCloseSelectFloorsPanel.bind(this);
        this.onClickFloorNum = this.onClickFloorNum.bind(this);
    }

    componentDidMount() {
        // 根据当前楼栋的详情，拉去描点数据
        // 长城汇-T1
        var url = this.props.buildingIntroData.alias + "-md.json";
        ajax({ fullUrl: '../../../projectBuildingData/' + url }, function (e) {
            this.setState({ mdJson: e })  // 默认显示T1的信息
        }.bind(this))

        // 显示相应的楼栋效果 (T1)  
        if (this.props.parentPath === '/project/cch') {
            var name = this.props.path.substr(this.props.path.length - 2, 2);
            this.refs[name].className += ' highlight';
        }

    }

    clickReturnBtn = () => {

    }

    onOpenSelectFloorsPanel = () => {
        this.refs.popFloor.style.top = "0";
    }

    onCloseSelectFloorsPanel = () => {
        this.refs.popFloor.style.top = "6.18rem";
    }

    /**
     * 选择楼层
     */
    onClickFloorNum = (e) => {
        // 选择楼层之后，切换描点数据
        var mdJson = this.state.mdJson;
        // 去掉F
        // var floorName = e.target.textContent.substr(0, e.target.textContent.length - 1);
        // console.log(floorName);
        var floorName = e.target.textContent;

        // 搜索描点数据
        var floorMdJson = null;
        var curFloorData = null;
        for (let i in mdJson) {
            let list = i.split(',');
            for (let j = 0; j < list.length; j++) {
                if (list[j] === floorName) {
                    floorMdJson = mdJson[i];
                }
            }
        }

        // 搜索楼层数据
        for (let i in this.props.curBuildingData) {
            if (this.props.curBuildingData[i].Floor === floorName) {
                curFloorData = this.props.curBuildingData[i].data
            }
        }

        this.setState({ floorMdJson: floorMdJson, curFloorData: curFloorData, floorName: floorName });



        console.log("当前楼层的详细信息");
        console.log(curFloorData);
        this.onCloseSelectFloorsPanel();
        EventManager.getInstance().emit('changeFloors');
        if (!floorMdJson) {
            alert('当前没有户型图数据')
            return;
        }
        if (!curFloorData) {
            alert('当前没有户型数据')
            return;
        }


    }

    onCloseFloorPage = () => {
        this.setState({ floorMdJson: null, curFloorData: null })
    }

    render() {
        // console.log(this.props);
        let PDomList = [];

        // 右侧楼栋描述文件的动态P标签创建
        const intro = this.props.buildingIntroData.intro[0];
        for (var i in intro) {
            let p = <p key={i} >
                <span className="pb-rightIntro-span-one">{i}</span>{"　:　"}
                <span className="pb-rightIntro-span-two" dangerouslySetInnerHTML={{ __html: intro[i] }}></span>
            </p>
            PDomList.push(p);
        }

        // 左侧楼层数字弹出框的动态创建  (T1 或 其他楼栋的楼层信息)
        const floorsData = this.props.curBuildingData;


        let FloorsNumbs = [];
        if (floorsData) {
            floorsData.sort(function (a, b) {
                return parseInt(a.Floor) - parseInt(b.Floor);
            })
            for (let i = 0; i < floorsData.length; i++) {
                let p = <li key={i} onClick={this.onClickFloorNum}>{floorsData[i].Floor}</li>
                FloorsNumbs.push(p);
            }
        }


        // 覆盖上方的楼层户型展示页面
        let pf = null;

        const floorMdJson = this.state.floorMdJson;
        const curFloorData = this.state.curFloorData;
        const floorName = this.state.floorName;
        if (floorMdJson && curFloorData) { // 如果描点数据和楼层数据同事存在
            pf = <ProjectFloor
                name={this.props.buildingIntroData.name}
                buildingIntro={this.props.buildingIntroData.intro[0]}
                mdJson={floorMdJson}
                curFloorData={curFloorData}
                onCloseFloorPage={this.onCloseFloorPage}
                onCloseSelectFloorsPanel={this.onCloseSelectFloorsPanel}
                floorName={floorName}
                onOpenSelectFloorsPanel={this.onOpenSelectFloorsPanel}
            />
        }

        let pbr = null;
        if (this.props.parentPath === '/project/cch') {
            pbr = <div className="pb-contentIntro">
                <img src={dl} className="dl-main-one" />
                <img src={gl1} className="main-one" ref="T1" />
                <img src={gl2} className="main-two" ref="T2" />
                <img src={gl3} className="main-three" ref="T3" />
            </div>;
        } else if (this.props.parentPath === '/project/jxlc') {
            pbr = <div className="pb-contentIntro">
                <img src={jxlcDl} className="jxlcDl" />
            </div>
        } else if (this.props.parentPath === '/project/jwjr') {
            pbr = <div className="pb-contentIntro">
                <img src={jwjr} className="jwjrDl" />
            </div>
        }


        return (
            <div className="buildingsPage cch-blackBg">
                <div className="grayBg">
                    {/* 左侧楼栋介绍 */}
                    <div className="pb-leftIntro">
                        <img src={ldjs} alt='' className="" />
                        {/*<p className="pb-leftIntro-text">楼栋简介</p>*/}
                        <p className="pb-leftIntro-text-main">{this.props.buildingIntroData.intro[1]["简介"]}</p>
                        <div onClick={this.onOpenSelectFloorsPanel}>查看楼层</div>
                    </div>
                    {/* 中间楼栋展示图片 */}
                    {pbr}
                    {/* 右侧楼栋详细数据 */}
                    <div className="pb-rightIntro">
                        {PDomList}
                    </div>
                </div>

                {/* 弹出楼层选择侧边框 */}
                <div className="popup" ref="popFloor">
                    <div className="popup-top"><p className="popup-top-p" onClick={this.onCloseSelectFloorsPanel}>返回</p></div>
                    <ul className="popup-ul">
                        {FloorsNumbs}
                    </ul>
                </div>

                {/* 弹出楼层中的具体户型图和具体出租信息 */}
                {pf}

                {/* 返回按钮也要取消下方楼栋按钮的active的状态 */}
                <Link className="returnBtn" to={this.props.parentPath}  >返回</Link>
            </div>
        )

    }
}

export default ProjectBuilding;